import { useRef } from "react";
import { Button } from "antd";
import { PlusOutlined } from "@ant-design/icons";

import { QueryPage } from "@components";
import District from "./module/district";
import { fields, GetColumns } from "./config";
import { riskAreaFind } from "@apis/riskAreaApi";
import { useMainContext } from '@contexts/MainContext'

const RiskArea = () => {
  const { isButtomShow } = useMainContext()

  const queryFormRef = useRef("queryFormRef");
  const formProps = {
    formRef: queryFormRef,
    fields: fields,
    initialValues: {
      status: '1',
    },
    extraTail: (
      <>
        {isButtomShow('050102') &&<Button
          icon={<PlusOutlined />}
          onClick={() => districtRef.current.setOpen()}
        >
          新增行政区
        </Button>}
        {/* <Button icon={<PlusOutlined />} onClick={() => setOpen(true)}>新政自定义区域</Button> */}
      </>
    ),
  };

  //编辑
  const edit = (row) => {
    districtRef.current.setOpen(row)
  };

  const tableProps = {
    rowKey: "cfgAreaId",
    columns: GetColumns(queryFormRef, edit),
  };

  const districtRef = useRef("districtRef");

  return (
    <>
      <QueryPage
        formProps={formProps}
        tableProps={tableProps}
        queryApi={riskAreaFind}
        showModal={false}
      />
      <District districtRef={districtRef} queryFormRef={queryFormRef}/>
    </>
  );
};

export default RiskArea;
